<template>
    <div>
        <el-table :data="tableData" border="" :summary-method="getSummaries" show-summary=""  style="width:100%">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="firstAmount" label="首次金额"></el-table-column>
            <el-table-column prop="secondAmount" label="二次金额"></el-table-column>
            <el-table-column prop="thirdAmount" label="三次金额"></el-table-column>
        </el-table>
    </div>
</template>
<script>
import MyTable from '../components/myTable'
export default {
  components: {
    MyTable
  },
  data(){
      return{
          tableData: [
        {id: '12987122',name: 'Healer',firstAmount: '234',secondAmount: '3.2',thirdAmount: 10},
        {id: '12987123',name: 'Healer',firstAmount: '165',secondAmount: '4.43',thirdAmount: 12},
        {id: '12987124',name: 'Healer',firstAmount: '324',secondAmount: '1.9',thirdAmount: 9},
        {id: '12987125',name: 'Healer',firstAmount: '621',secondAmount: '2.2',thirdAmount: 17},
        {id: '12987126',name: 'Healer',firstAmount: '539',secondAmount: '4.1',thirdAmount: 15}
        ]
      }
  },
  methods:{
      getSummaries(param){
          const {columns,data} = param;
          const sums = [];
          columns.forEach((column,index) => {
              if(index === 0){
                  sums[index] = '总价';
                  return;
              }
              const values = data.map(item => Number(item[column.property]));
              if(!values.every(value => isNaN(value))){
                  sums[index] = values.reduce((prev,curr) => {
                      const value = Number(curr);
                      if(!isNaN(value)){
                          return prev + curr;
                      }else{
                          return prev;
                      }
                  }, 0);
                  sums[index]  += '元';
              }else{
                  sums[index] = 'N/A'
              }
          });
          return sums;
      }
  }
}
</script>